<template>
  <div>
    <!-- 搜索栏 -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="处方编号">
        <el-input v-model="searchForm.rxNo" placeholder="请输入处方编号"/>
      </el-form-item>
      <el-form-item label="开方医生">
        <el-input v-model="searchForm.doctor" placeholder="请输入开方医生"/>
      </el-form-item>
      <el-form-item label="审核医生">
        <el-input v-model="searchForm.reviewer" placeholder="请输入审核医生"/>
      </el-form-item>
      <el-form-item label="患者姓名">
        <el-input v-model="searchForm.patientName" placeholder="请输入患者姓名"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.status" placeholder="请选择">
          <el-option label="全部" value=""/>
          <el-option label="待审核" value="待审核"/>
          <el-option label="已审核" value="已审核"/>
          <el-option label="已拒绝" value="已拒绝"/>
        </el-select>
      </el-form-item>
      <el-form-item label="医生签字时间">
        <el-date-picker
            v-model="searchForm.caTime"
            placeholder="请选择起始时间"
            style="width: 240px"
            type="date"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="药师签字时间">
        <el-date-picker
            v-model="searchForm.pharmacistTime"
            placeholder="请选择起始时间"
            style="width: 240px"
            type="date"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px;">
      <el-table-column label="序号" prop="index" width="60"/>
      <el-table-column label="处方编号" prop="prescriptionNo"/>
      <el-table-column label="问诊订单" prop="consultationNo"/>
      <el-table-column label="患者姓名" prop="suffererName"/>
      <el-table-column label="科室" prop="deptName"/>
      <el-table-column label="诊断" prop="diagnosis"/>
      <el-table-column label="开方医生" prop="doctorName"/>
      <el-table-column label="医生签字" prop="doctorName"/>
      <el-table-column label="医生签署时间" prop="createdAt"/>
      <el-table-column label="审核医生" prop="doctorName"/>
      <el-table-column label="药师签字" prop="doctorName"/>
      <el-table-column label="药师签字时间" prop="createdAt"/>
      <el-table-column label="审核状态" prop="status">
        <template slot-scope="scope">
    <span :style="{
      color: scope.row.status === '1' ? '#4CAF50 !important' :
             scope.row.status === '2' ? '#F44336 !important' :
             '#000000 !important'
    }">
      {{
        scope.row.status == '0' ? '待审核' :
            scope.row.status == '1' ? '已审核' :
                scope.row.status == '2' ? '已拒绝' : '不限'
      }}
    </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-link type="primary" @click="viewPrescription(scope.row)">查看处方</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        background
        layout="prev, pager, next, sizes, jumper"
        style="margin-top: 20px; text-align: left;"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
    />

    <!-- 处方详情对话框 -->
    <el-dialog :visible.sync="showDialog" title="处方详情" width="600px">
      <div>
        <p>处方编号：{{ prescriptionDetail.rxNo }}</p>
        <p>患者姓名：{{ prescriptionDetail.patientName }}</p>
        <p>性别：{{ prescriptionDetail.gender }}</p>
        <p>年龄：{{ prescriptionDetail.age }}</p>
        <p>科室：{{ prescriptionDetail.dept }}</p>
        <p>主诉：{{ prescriptionDetail.mainComplaint }}</p>
        <p>现病史：{{ prescriptionDetail.presentIllness }}</p>
        <p>既往史：{{ prescriptionDetail.pastHistory }}</p>
        <p>过敏史：{{ prescriptionDetail.allergyHistory }}</p>
        <p>诊断：{{ prescriptionDetail.diagnosis }}</p>
        <p>治疗建议：{{ prescriptionDetail.treatment }}</p>
        <p>开方医生：{{ prescriptionDetail.doctor }}</p>
        <p>审核医生：{{ prescriptionDetail.reviewer }}</p>
        <p>药品信息：</p>
        <ul>
          <li v-for="(med, idx) in prescriptionDetail.medicines" :key="idx">
            {{ med.name }}（{{ med.spec }}），{{ med.usage }}，数量：{{ med.amount }}
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
// 页面名称：CA签章记录
export default {
  name: 'OrderCA',
  data() {
    return {
      searchForm: {
        rxNo: '',
        doctor: '',
        reviewer: '',
        patientName: '',
        status: '',
        caTime: '',
        pharmacistTime: ''
      },
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      showDialog: false,
      prescriptionDetail: {}
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 查询
    handleSearch() {
      this.currentPage = 1
      this.fetchData()
    },
    // 获取数据（调用后端接口）
    fetchData() {
      // 构造查询参数
      const params = {
        ...this.searchForm,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      // 调用后端接口
      axios.post('/prescriptions/page', params)
          .then(res => {
            if (res.data && res.data.code === 200) {
              this.tableData = res.data.data.list
              this.total = res.data.data.total
            } else {
              this.$message.error(res.data.message || '查询失败')
            }
          })
          .catch(() => {
            this.$message.error('网络错误')
          })
    },
    // 分页
    handleSizeChange(size) {
      this.pageSize = size
      this.fetchData()
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchData()
    },
    // 查看处方
    viewPrescription(row) {
      // 假设 row 里有处方编号
      // 实际开发中可通过 row.rxNo 请求后端接口获取详情
      this.prescriptionDetail = {
        rxNo: row.prescriptionNo,
        patientName: '李小明',
        gender: '男',
        age: 62,
        dept: '消化内科',
        mainComplaint: 'xxxxxxxxxxxxxxxxxxxx',
        presentIllness: 'xxxxxxxxxxxxxxxxxxxx',
        pastHistory: 'xxxxxxxxxxxxxxxxxxxx',
        allergyHistory: 'xxxxxxxxx',
        diagnosis: '腹泻',
        treatment: 'xxxxxxxxxxxxxxxxxxxx',
        doctor: '李xx',
        reviewer: '张三',
        medicines: [
          {
            name: '阿莫西林胶囊',
            spec: '0.25g*50粒/盒',
            usage: '每日一次，1片/次，口服，共3天',
            amount: '1盒'
          },
          {
            name: '阿莫西林胶囊',
            spec: '0.25g*50粒/盒',
            usage: '每日一次，1片/次，口服，共3天',
            amount: '1盒'
          }
        ]
      }
      this.showDialog = true
    }
  }
}
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}
</style> 